<template>
  <p-steps class="steps-container" progress-dot :size="small">
    <p-step
      v-for="(item, i) in listOptions"
      :key="i"
      :title="item.title"
      :status="item.status"
    >
      <template slot="description">
        <p-tooltip :title="item.handler.join(',')" placement="bottom">
          <span>{{ item.handler.join(',') }}</span>
        </p-tooltip>
      </template>
    </p-step>
  </p-steps>
</template>

<script>
export default {
  props: {
    nameList: {
      type: Object,
      default: () => ({}),
    },
    nodeList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {
    planNodeOptions() {
      return this.$store.state.dictionary.dict['plan_node'] || {};
    },
    listOptions() {
      const first = Number(this.nodeList[0]);
      const last = Number(this.nodeList[this.nodeList.length - 1]);
      return Object.keys(this.planNodeOptions).reduce((pre, cur) => {
        const numberCur = Number(cur) || 0;
        let status = 'process';
        if (numberCur < first || first === 9) {
          status = 'finish';
        } else if (numberCur > last) {
          status = 'wait';
        }
        pre[cur] = {
          title: this.planNodeOptions[cur],
          handler: this.nameList[cur] || [],
          status,
        };
        return pre;
      }, {});
    },
  },
};
</script>
<style lang="less" scoped>
.steps-container {
  min-height: 106px;
  padding: 10px 0;
  margin: 20px 0;
  overflow-y: scroll;
}
/deep/
  .poros-steps-item-process
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background-color: #1890ff;
}
/deep/
  .poros-steps-item-process
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #1890ff;
}
/deep/
  .poros-steps-item-finish
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #09a120;
}
/deep/
  .poros-steps-item-finish
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #09a120;
}

/deep/
  .poros-steps-item-wait
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #cdced5;
}
/deep/
  .poros-steps-item-wait
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #cdced5;
}
/deep/ .poros-steps-item-content {
  height: 40px;
}
/deep/ .poros-steps-item-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
